<template>

  <div>
    <h1>和：{{sum}}</h1>
    <button @click="sum++">点击+1</button>
    <hr>

    <h2>当前的信息为：{{msg}}</h2>
    <button @click="msg+='!'">改变信息</button>
    <hr>

    <h3>姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <h3>工作：{{person.job.name}}</h3>
    <button @click="person.name+='!'">改变信息</button>
    <button @click="person.age++">改变信息</button>
    <button @click="person.job.name+='~'">改变信息</button>

  </div>

</template>

<script>

import {ref,reactive,watch,watchEffect} from 'vue'

export default {
  name: "demo03",
  watch:{
    // sum(newValue,oldValue){
    //   console.log('sum的值变化',newValue,oldValue)
    // }
    // sum:{
    //   immediate:true,//立即监视
    //   deep:true,//深度监视
    //   handler(newValue,oldValue){
    //     console.log('sum的值变化',newValue,oldValue)
    //   }
    // }
  },
  setup(){
    let sum = ref(0)
    let msg = ref('你好')

    let person = reactive({
      name: '张三',
      age: 23,
      job:{
        name:'扫地员'
      }
    })

    //情况一：监视
    // watch(sum,(newValue,oldValue)=>{
    //   console.log('sum变化了',newValue,oldValue)
    // },{immediate:true})

    //情况二：
    // watch([msg,sum],(newValue,oldValue)=>{
    //   console.log('msg变化了',newValue,oldValue)
    // },{immediate:true})

    //情况三：   无法正确获取oldvalue
    // watch(person,(newValue,oldValue)=>{
    //   console.log('person变化了',newValue,oldValue)
    // },{deep:false})

    //情况四：
    // watch(()=>person.age,(newValue,oldValue)=>{
    //   console.log('person.age变化了',newValue,oldValue)
    // })

    //情况5
    // watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
    //   console.log('person.age变化了',newValue,oldValue)
    // })

    //特殊情况
    // watch(()=>person.job,(newValue,oldValue)=>{
    //   console.log('person.age变化了',newValue,oldValue)
    // },{deep:true})

    watchEffect(()=>{
      const x1 = sum.value
      const c3 = msg.value
      console.log('watchEffect回调执行')
    })


    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style scoped>

</style>